import 'package:flutter/material.dart';
import 'package:flutterutil/views/counter/FadeRoute.dart';
import 'package:flutterutil/views/counter/PhotoViewGalleryScreen.dart';
import 'package:flutterutil/views/counter/PhotoViewSimpleScreen.dart';
import 'package:photo_view/photo_view.dart';

class TabTwoPage extends StatefulWidget {
  TabTwoPage({Key key}) : super(key: key);

  @override
  _TabTwoPageState createState() => _TabTwoPageState();
}

class _TabTwoPageState extends State<TabTwoPage> {

  List fildIdList = [
    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595502586906&di=97c8085bb96cb9886e1e443bc4474575&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D1484500186%2C1503043093%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853",
    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595502586906&di=68bd196614db19cb4c1b2a6c3b793ab8&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D2247852322%2C986532796%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853",
    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595502586906&di=8dec788d3efd94fd79246f1b161ad63b&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D3363001160%2C1163944807%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D830",
    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595502586906&di=7749bf96db1df18bdd3b229f18fcaa93&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D583874135%2C70653437%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D3607%26h%3D2408",
  ];
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {


    return GridView(
      physics: NeverScrollableScrollPhysics(), // 禁止使用GridView滚动,解决GridView与SingleChildScrollView滚动冲突
      shrinkWrap: true,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, //横轴三个子widget
        childAspectRatio: 1.0, //宽高比为1时，子widget
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
      ),
      children: fildIdList.asMap().keys.map((e)=>
//          FadeInImage.assetNetwork(
//            image: e,
//            placeholder: 'assets/images/timg.gif',),
        photoViewWidget(e)
      ).toList(),

    );

      
  }
  
  Widget photoViewWidget(e){
    return InkWell(
      child: PhotoView(
        imageProvider: NetworkImage(fildIdList[e]),
//        loadingBuilder: ,
        loadFailedChild: Container(
          child: Image(
              image: AssetImage("assets/images/error.jpg"),
              width: 100.0
          ),
        ),
      ),
      onTap: (){
//        Navigator.of(context).push(new FadeRoute(page: PhotoViewSimpleScreen(
//          imageProvider: NetworkImage(fildIdList[e]),
//          heroTag: 'simple',
//        )));


        //FadeRoute是自定义的切换过度动画（渐隐渐现） 如果不需要 可以使用默认的MaterialPageRoute
        Navigator.of(context).push(new FadeRoute(page: PhotoViewGalleryScreen(
          images:fildIdList,//传入图片list
          index: e,//传入当前点击的图片的index
          heroTag: "simple",//传入当前点击的图片的hero tag （可选）
        )));
      },
    );
  }

  Widget imageWidget(){
    return Image(
        image: AssetImage("assets/images/timg.gif"),
        width: 100.0
    );
  }


}